<template>
  <div class="modelPage">
    <el-card class="card1">
      <el-form label-width="80px" :model="searchData" >
        <el-row>
          <el-col :span="8">
            <el-form-item label="车型编号：">
              <el-input v-model="searchData.id" placeholder="请输入车型编号">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应载重量：">
              <el-select
                placeholder="请选择应载重量"
                style="width: 100%"
                v-model="searchData.allowableLoad"
              >
                <el-option
                v-for="item in allowableLoadOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应载体积：">
              <el-select
                placeholder="请选择应载体积"
                style="width: 100%"
                v-model="searchData.allowableVolume"
              >
                <el-option
                v-for="item in allowableVolumeOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆类型：">
              <el-input placeholder="请输入车辆类型" v-model="searchData.name">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button class="btn1"  @click="search()">搜索</el-button>
            <el-button class="btn2" @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 车型列表 -->
    <el-card>
      <el-button  class="btn3" @click="showDialog=true">新增车型</el-button>
      <el-table :data="tableData">
        <el-table-column type="index"  label="序号" width="80">
        </el-table-column>
          <el-table-column prop="id" label="车型编号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="车辆类型"> </el-table-column>
        <el-table-column prop="num" label="车型数量" width="110">
        </el-table-column>
        <el-table-column prop="allowableLoad" label="应载重量(吨)">
        </el-table-column>
        <el-table-column prop="allowableVolume" label="应载体积(立方米)">
        </el-table-column>
        <el-table-column prop="measureLong" label="长(米)" width="110">
        </el-table-column>
        <el-table-column prop="measureWidth" label="宽(米)" width="110">
        </el-table-column>
        <el-table-column prop="measureHigh" label="高(米)" width="110">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120" align="center">
          <template #default="{ row }">
            <el-row type="flex" justify="space-around">
              <el-link
                :underline="false"
                type="primary"
                @click="editDialog(row.id)"
                >编辑</el-link
              >
              <el-divider direction="vertical"></el-divider>
              <el-link
                :underline="false"
                type="danger"
                @click="delModel(row.id)"
                >删除</el-link
              >
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 弹层 -->
    <el-dialog :visible.sync="showDialog" title="新增车辆" @close="close">
      <el-form label-width="130px" :model="form" ref="formRef" :rules="rules">
        <el-form-item label="车辆类型" prop="name">
          <el-input v-model="form.name" placeholder="请输入车辆类型"></el-input>
        </el-form-item>
        <el-form-item label="应载重量" prop="allowableLoad">
          <el-input v-model="form.allowableLoad" placeholder="请输入车辆类型">
            <span slot="suffix">吨</span>
          </el-input>
        </el-form-item>
        <el-form-item label="应载体积" prop="allowableVolume">
          <el-input v-model="form.allowableVolume" placeholder="请输入车辆体积">
            <span slot="suffix">立方</span>
          </el-input>
        </el-form-item>
        <el-form-item label="长" prop="measureLong">
          <el-input v-model="form.measureLong" placeholder="0.0">
            <span slot="suffix">米</span>
          </el-input>
        </el-form-item>
        <el-form-item label="宽" prop="measureWidth">
          <el-input v-model="form.measureWidth" placeholder="0.0">
            <span slot="suffix">米</span>
          </el-input>
        </el-form-item>
        <el-form-item label="高" prop="measureHigh">
          <el-input v-model="form.measureHigh" placeholder="0.0">
            <span slot="suffix">米</span>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row type="flex" justify="center">
          <el-button class="btn1" @click="submit">确定</el-button>
          <el-button class="btn2"  @click="close">取消</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getModelListApi, addModelApi, editModelApi, delModelApi, getModelInfoApi } from '@/api/models'
export default {
  name: 'Car-Models',
  data () {
    return {
      searchData: {
        id: '',
        name: '',
        allowableLoad: '',
        allowableVolume: '',
        page: 1,
        pageSize: 5
      },
      allowableLoadOptions: [
        { label: '<1.8(吨)', value: 'RANGE_LEVEL_1' },
        { label: '1.8-6(吨)', value: 'RANGE_LEVEL_2' },
        { label: '6-14(吨)', value: 'RANGE_LEVEL_3' },
        { label: '14-30(吨)', value: 'RANGE_LEVEL_4' },
        { label: '30-50(吨)', value: 'RANGE_LEVEL_5' },
        { label: '50-100(吨)', value: 'RANGE_LEVEL_6' },
        { label: '100>(吨)', value: 'RANGE_LEVEL_7' }
      ],
      allowableVolumeOptions: [
        { label: '<3(㎡)', value: 'RANGE_LEVEL_1' },
        { label: '3-5(㎡)', value: 'RANGE_LEVEL_2' },
        { label: '5-10(㎡)', value: 'RANGE_LEVEL_3' },
        { label: '10-15(㎡)', value: 'RANGE_LEVEL_4' },
        { label: '15-30(㎡)', value: 'RANGE_LEVEL_5' },
        { label: '30-50(㎡)', value: 'RANGE_LEVEL_6' },
        { label: '50-80(㎡)', value: 'RANGE_LEVEL_7' },
        { label: '80-150(㎡)', value: 'RANGE_LEVEL_8' },
        { label: '>150(㎡)', value: 'RANGE_LEVEL_9' }
      ],
      value: '',
      options: [],
      showDialog: false,
      tableData: [],
      form: {
        id: '',
        name: '',
        allowableLoad: '',
        allowableVolume: '',
        measureLong: 0.0,
        measureWidth: 0.0,
        measureHigh: 0.0
      },
      rules: {
        name: [
          { required: true, message: '车型名称不能为空', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '应载重量不能为空', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '应载体积不能为空', trigger: 'blur' }
        ]
      },
      page: 1,
      pageSize: 5,
      total: 0,
      queryInfo: {
        page: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  created () {
    this.getModelList()
  },
  methods: {
    async getModelList () {
      const res = await getModelListApi({
        page: this.page,
        pageSize: this.pageSize
      })
      console.log(res)
      this.tableData = res.data.items
      this.total = +res.data.counts
      // console.log(+res.data.counts)
      // console.log(this.tableData)
    },
    handleSizeChange (newpageSize) {
      this.pageSize = newpageSize
      this.getModelList()
    },
    handleCurrentChange (newpage) {
      this.page = newpage
      this.getModelList()
    },
    async submit () {
      await this.$refs.formRef.validate()
      if (this.form.id) {
        await editModelApi(this.form)
      } else {
        await addModelApi(this.form)
      }
      this.$message.success(this.form.id ? '编辑车型成功' : '添加车型成功')
    },
    async editDialog (id) {
      const res = await getModelInfoApi(id)
      this.form = res.data
      // console.log(this.form)
      this.showDialog = true
    },
    close () {
      this.$refs.formRef.resetFields()
      this.form = {
        name: '',
        allowableLoad: '',
        allowableVolume: '',
        measureLong: 0.0,
        measureWidth: 0.0,
        measureHigh: 0.0
      }
      this.showDialog = false
      this.getModelList()
    },
    async delModel (id) {
      const len = this.tableData.length
      await this.$confirm('是否确认删除？')
      await delModelApi(id)
      // 如果当前页面只剩一条数据，删除成功之后，
      // 如果页码总页数大于1，页码自减1，跳转更新前一页数据
      if (len === 1 && this.page > 1) {
        this.page--
      }
      this.$message.success('删除成功')
      this.getModelList()
    },
    reset () {
      this.searchData.id = ''
      this.searchData.name = ''
      this.searchData.allowableLoad = ''
      this.searchData.allowableVolume = ''
      this.getModelList()
    },
    async search () {
      const res = await getModelListApi(this.searchData)
      // console.log(res)
      this.tableData = res.data.items
      this.total = +res.data.counts
    }
  }
}
</script>

<style lang="scss" scoped>
.modelPage {
  padding: 20px;
  background-color: #f3f4f7;
  padding-top: 23px;
}
::v-deep .card1 {
  margin-bottom: 20px;
  .el-card__body {
    padding-top: 20px;
    padding-left: 0;
    .el-row {
      margin: 0 !important;
      .el-col {
        padding-left: 30px;
        padding-right: 30px;
      }
      .el-button {
        width: 90px;
        padding: 10px 20px;
        border-radius: 5px;
      }
    }
    .el-form-item__label {
      color: #20232a;
      font-weight: 400;
      text-align: right;
      padding-left: 10px;
      box-sizing: border-box;
      white-space: nowrap;
    }
  }
}

::v-deep .card2 {
  .el-button {
    margin-bottom: 20px;
    width: 100px;
    height: 40px;
    color: #fff;
  }
  .el-card__body {
    padding: 28px 28px 28px 28px;
    .el-table {
      border: 1px solid #ebeef5;
      thead tr th {
        background: #f8faff;
      }
    }
  }
  .el-pagination {
    margin: 20px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #20232a;
    font-size: 14px;
  }
}
::v-deep .el-dialog {
  width: 600px;
  transform: none;
  left: 0;
  position: relative;
  margin: auto;
  border-radius: 8px;
  .el-dialog__header {
    padding: 15px 30px 15px;
    background-color: #f3f4f7;
    border-radius: 8px 8px 0 0;
  }
  .el-dialog__body {
    padding: 40px 60px 0;
    padding-left: 0;
  }
  .el-input__suffix-inner {
    span {
      color: rgb(32, 35, 42);
      font-weight: 400;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      margin-right: 14px;
      line-height: 40px;
    }
  }
}
.btn1{
      background-color: #E15536;
      color: #ffffff;
      height: 40px;
      width: 100px;
      border-radius: 5px;
      font-weight: 400;
}
.btn2{
      height: 40px;
      color: #2a2929;
      border: 1px solid #d8dde3;
      border-radius: 5px;
      font-weight: 400;
      width: 100px;
}
.btn3{
  background-color: #E15536;
      color: #ffffff;
      width: 100px;
      height: 40px;
      border-radius: 5px;
      font-weight: 400;
}
</style>
